/**
 * 高亮组件，使用 react-syntax-highlighter
 */

import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlighter from './react-syntax-highlighter';
import PURPLE_COLOR from '@alife/aisc-core/purple/js';
import './index.scss';

export default class Highlighter extends React.Component {
  static propTypes = {
    onLineNumberClick: PropTypes.func,
  };

  static defaultProps = {
    onLineNumberClick: null,
  };

  render() {
    const { onLineNumberClick, ...others } = this.props;
    return (
      <SyntaxHighlighter
        className="highlighter-pre"
        customStyle={{
          padding: 0,
          borderRadius: 0,
          border: 'none',
          marginBottom: '0',
          background: PURPLE_COLOR['color-white'],
          'white-space': 'pre',
        }}
        // lineNumberContainerStyle 修改的是行号所在元素的父元素样式，即<code><span>1</span></code>
        // 所以，未提高行号hover 或 click时的精确度，应该调整行号所在元素样式
        lineNumberContainerStyle={{
          float: 'left',
          // paddingLeft: onLineNumberClick ? '18px' : '6px',
          // paddingRight: '8px',
          marginRight: '8px',
          textAlign: 'right',
          color: PURPLE_COLOR['color-n2-1'],
        }}
        codeTagProps={{
          style: {
            verticalAlign: 'middle',
            fontSize: '12px',
            lineHeight: '20px',
          },
        }}
        onLineNumberClick={onLineNumberClick}
        showLineNumbers
        {...others}
      />
    );
  }
}
